import { Tabs, Tab, PackageManagerTabs } from "@theme";
import YarnProblem from '../../shared/problems/yarnProblem.md'

# Vue3 MF

在 Vue3 中，我们提供了两个示例项目供参考：

- `vue3-base`：基础项目，用于书写通用业务组件对外暴露，它通常是一些项目的基石。
- `vue3-project`：基础项目，用于和其他通用业务组件进行集成，它通常是一些项目的业务逻辑。

> 💡TIP：两个业务的 demo 仅仅只是部分依赖以及 emp 的配置不一样，你可以根据业务需求进行自由选择或者组合。

## 前期准备

在开始之前，请确保你已经配备了如下开发环境：

- Node.js >= `20.0.0`
- npm >= `8`

> 💡TIP：建议你使用 `nvm` 来管理 node 版本，直接执行 `nvm use 20` 命令即可完成开发环境设置

### 安装 emp⚡

[快速上手](/guide/start/quick-start)

### 项目初始化

在对项目进行初始化之前，我们先克隆 `emp` 仓库，将示例代码拉取到本地。

```bash
git clone https://github.com/empjs/emp
```

> 🚨 如果你无法拉取项目至本地，请检查你的网络环境或代理设置是否可以访问 github，如果仍不能解决，请联系我们。

在拉取完成代码后，我们进入代码的根目录，安装项目依赖，推荐使用`PNPM`进行安装：

<PackageManagerTabs command='install' />

## 运行示例项目

> 🚧 注意：在运行示例项目之前，请确保你已经完成了前期准备，并当前目录处于 `emp` 仓库的根目录下。

### vue3 demo

首先进入示例项目的根目录：

```bash
# 运行 vue-3-base 示例项目
cd demos/vue3
```

然后运行代码：

<PackageManagerTabs command='dev' />

运行成功后，您可以分别访问`http://localhost:9302/` 与 `http://localhost:9301/`进行查看。

#### 演示效果

`:9301` 基站效果：

<iframe src="https://mf-vue3.sc.empjs.dev/host/"
  style={{width: '100%', height: '1500px', border: `20px solid #aaa`, borderRadius: '4px', overflow: 'hidden'}}
  title="mf-host"
></iframe>

`:9302` 应用效果：

<iframe src="https://mf-vue3.sc.empjs.dev/app/"
  style={{width: '100%', height: '1000px', border: `20px solid #aaa`, borderRadius: '4px', overflow: 'hidden'}}
  title="mf-host"
></iframe>


### 远程组件调用
```vue title="vue-3-project/src/Home.vue"
<template>
  <div>
    <h1>Vue 3 Project</h1>
    <h2>vue3Base/TableComponent</h2>
    <TableComponent />
    <h2>vue3Base/JSXComponent</h2>
    <JSXComponent />
    <TsxScript attr1="aaa" :attr2="true" />
    <ButtonComponent attr1="bbb" :attr2="true" />
  </div>
</template>

<script lang="ts">
export default {
  name: 'App',
}
</script>

<script lang="ts" setup>
import TableComponent from '@v3/TableComponent'
import JSXComponent from '@v3/JSXComponent'
import TsxScript from '@v3/TsxScript'
import ButtonComponent from '@v3/ButtonComponent'
//
import { onMounted, onUnmounted, onBeforeMount } from 'vue'
onMounted(() => console.log('onMounted'))
onUnmounted(() => console.log('onUnmounted'))
onBeforeMount(() => console.log('onBeforeMount'))

</script>

<style lang="less" scoped></style>

```


### 项目配置

```ts title="vue-3-base/emp.config.ts"
import {defineConfig} from '@empjs/cli'
import lightningcss from '@empjs/plugin-lightningcss'
import Vue3 from '@empjs/plugin-vue3'
import {pluginRspackEmpShare} from '@empjs/share'
export default defineConfig(() => {
  return {
    plugins: [
      Vue3(),
      lightningcss(),
      pluginRspackEmpShare({
        name: 'vue3Base',
        // dts: {
        //   consumeTypes: true,
        //   generateTypes: {
        //     compilerInstance: 'vue-tsc',
        //   },
        // },
        shared: {
          vue: {
            requiredVersion: '^3',
          },
        },
        exposes: {
          './ButtonComponent': './src/components/ButtonComponent',
          './TableComponent': './src/components/TableComponent',
          './JSXComponent': './src/components/JSXComponent',
          './TsxScript': './src/components/TsxScript',
          './Antd': './src/Antd',
          './Home': './src/Home',
        },
      }),
    ],
    appEntry: 'main.ts',
    server: {port: 9301, open: false},
    html: {title: 'EMP Vue3 Base'},
    debug: {
      clearLog: false,
      showRsconfig: false,
    },
  }
})


```

```ts title="vue-3-project/emp.config.ts"
import {defineConfig} from '@empjs/cli'
import Vue3 from '@empjs/plugin-vue3'
import {pluginRspackEmpShare} from '@empjs/share'
// cf vue3
const deploy = process.env.DEPLOY
const isCf = deploy === 'cloudflare'
//
export default defineConfig(store => {
  const ip = store.getLanIp()
  const vue3Base = isCf ? 'https://mf-vue3.sc.empjs.dev/host/emp.js' : `http://${ip}:9301/emp.js`
  return {
    plugins: [
      Vue3(),
      pluginRspackEmpShare({
        name: 'vue3Project',
        shared: {
          vue: {
            requiredVersion: '^3',
          },
        },
        remotes: {
          '@v3': `vue3Base@${vue3Base}`,
        },
      }),
    ],
    appEntry: 'main.ts',
    server: {port: 9302},
    html: {title: 'EMP Vue3 Projects'},
    debug: {
      clearLog: false,
      showRsconfig: false,
    },
  }
})


```

## 常见问题

<YarnProblem />